<template>
	<template v-if="!item.hidden">
		<template v-if="item.itemType === 'MENUITEM'">
			<AppMenuItemContent
				v-if="!menuHasChildren"
				v-bind="$props"
			></AppMenuItemContent>
			<a-sub-menu v-if="menuHasChildren" :key="item.name">
				<template #title>
					<AppIconText
						:imgPath="item.imgPath"
						:imgPathX="item.imgPathX"
						:imgSize="item.imgSize"
						:iconClass="item.iconClass"
						:text="
							item.capPSLanguageRes
								? $t(item.capPSLanguageRes, item.caption)
								: item.caption
						"
						:tooltip="
							item.tooltipPSLanguageRes
								? $t(item.tooltipPSLanguageRes, item.tooltip)
								: item.tooltip
						"
					/>
				</template>
				<template v-for="childMenu in item.menuItems" :key="childMenu.name">
					<MenuItem :item="childMenu" :counterData="counterData"></MenuItem>
				</template>
			</a-sub-menu>
		</template>
		<template v-else-if="item.itemType === 'SEPERATOR'">
			<a-menu-item class="app-menu-item--seperator" :key="item.name">
				<a-divider />
			</a-menu-item>
		</template>
		<template v-else-if="item.itemType === 'RAWITEM'">
			<a-menu-item class="app-menu-item--rawitem" :key="item.name">
				<AppRaw
					:name="item.caption"
					:contentType="item.contentType"
					:value="item.value"
					:iconClass="item.iconClass"
					:imgPath="item.imgPath"
				/>
			</a-menu-item>
		</template>
	</template>
</template>
<script lang="ts" setup>
import AppMenuItemContent from './menu-item-content.vue';
import { MenuItemProps } from '../menu';
const props = defineProps(MenuItemProps);

//  菜单项是否有子项菜单
const menuHasChildren = computed(() => {
	const { item } = props;
	if (item.menuItems && item.menuItems.length > 0) {
		return true;
	}
	return false;
});
</script>
